<template>
  <div class="app-container">
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="total-frame" style="justify-content: center">
            <div>
              <img :src="user_accounts_img" class="total-icon">
            </div>
            <div>
              <div class="total-title">用户总数</div>
              <div class="total-value">{{ userStatisticData.userTotalCount }}</div>
            </div>
          </div>
          <div class="total-frame">
            <div>
              <div class="total-title">今日新增用户</div>
              <div class="total-value">{{ userStatisticData.userTodayRegCount }}</div>
            </div>
          </div>
          <div class="total-frame">

            <div>
              <div class="total-title">近7天新增用户</div>
              <div class="total-value">{{ userStatisticData.userWeekRegCount }}</div>
            </div>
          </div>
          <div class="total-frame">

            <div>
              <div class="total-title">近30天新增用户</div>
              <div class="total-value">{{ userStatisticData.userMonthRegCount }}</div>
            </div>
          </div>
        </el-col>

        <el-col :span="10">
          <div class="total-frame" style="justify-content: center">
            <div>
              <img :src="visit_total_img" class="total-icon">
            </div>
            <div>
              <div class="total-title">访问量 </div>
              <div class="total-value">{{ userStatisticData.userTotalCount }}</div>
            </div>
          </div>
          <div class="total-frame">
            <div>
              <div class="total-title">今日访问量</div>
              <div class="total-value">{{ userStatisticData.userTodayVisitCount }}</div>
            </div>
          </div>
          <div class="total-frame">
            <div>
              <div class="total-title">近7日访问量</div>
              <div class="total-value">{{ userStatisticData.userWeekVisitCount }}</div>
            </div>
          </div>
          <div class="total-frame">
            <div>
              <div class="total-title">近30日访问量</div>
              <div class="total-value">{{ userStatisticData.userMonthVisitCount }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="total-frame" style="justify-content: center">
            <div>
              <img :src="groups_total_img" class="total-icon">
            </div>
            <div>
              <div class="total-title">群聊总数
                <span style="font-size: 14px;color: #909399">(多人群聊)</span>
              </div>
              <div class="total-value">{{ groupTotalCount }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
   </div>
</template>

<script>
  import { getUserCount} from '@/api/imUser';
  import { getConversationAccount} from '@/api/imGroup';
  import user_accounts_img from '@/assets/images/users_total.png';
  import groups_total_img from '@/assets/images/groups_total.png';
  import visit_total_img from '@/assets/images/home_order.png';
  export default {
    name: 'home',
    data() {
      return {
        loading: false,
        dataEmpty: false,
        user_accounts_img,
        groups_total_img,
        visit_total_img,
        userStatisticData:{
          userTotalCount:0,//用户总数
          userTodayRegCount:0,//今日注册
          userWeekRegCount:0,//近7天注册
          userMonthRegCount:0,//近30天注册
          userCurrentMonthRegCount:0,//本月注册数量
          userTodayVisitCount:0,//用户今日访问量
          userWeekVisitCount:0,//用户近7天访问量
          userMonthVisitCount:0,//用户近30天访问量
          userCurrentMonthVisitCount:0,//用户本月访问量
        },
        groupTotalCount:0,
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData:function (){
        this.getUserCount();
        this.getConversationAccount();
      },

      handleDateChange(){
        this.getData();
      },

      getUserCount(){
        getUserCount({}).then((res) => {
            console.log("获取用户数量响应结果",res);
            if (res.code==200){
              this.userStatisticData=res.data;
            }
        }).catch(error => {
          console.log("获取用户数量响应结果异常",error);
        })
      },
      getConversationAccount(){
        getConversationAccount({}).then((res) => {
          console.log("获取会话数量响应结果",res);
          if (res.code==200){
            this.groupTotalCount=res.data;
          }
        }).catch(error => {
          console.log("获取会话数量响应结果异常",error);
        })
      }
    }
  }
</script>

<style scoped>
  .app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
  }
  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    font-size: 16px;
    color: #909399;
    margin-bottom: 10px;
  }

  .total-value {
    font-size: 20px;
    color: #606266;
    margin-top: 10px;
    font-weight: bold;
  }
</style>
